<template>
  <div ref="chart" style="width: 100%;height: 400px;"></div>
</template>

<script>
    export default {
      data() {
        return {

        }
      },
      mounted(){
        this.initChart()
      },
      methods:{
        initChart(){
          var myChart = this.$echarts.init(this.$refs.chart);
          var option;

          option = {
            color:['#3398DB'],
            title:{
              text:'近6个月发布的文章数',
              left:'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '发布数',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220]
              }
            ]
          };

          option && myChart.setOption(option);

        }
      },
      }
</script>

<style>
</style>
